<template>
  <div class="video-desc">
    <div class="video-list">
      <div class="left-menu">
        <ul>
          <li class="menu" v-for="(item, index) in menuList" :key="index">
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="right-video">
        <div class="content" v-for="(item, index) in videoList" :key="index">
          <div class="image">
            <img :src="item.img" alt="">
            <div class="time-long">
              {{ item.timeLong }}
            </div>
          </div>
          <div class="title">
            {{ item.title }}
          </div>
          <div class="foot">
            <span class="name">{{ item.name }}</span>
            <span class="date">{{ item.date }}</span>
            <span class="watch">{{ item.watch }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import videoList from './videoList'
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      videoList,
      menuList: [
        '名家风采',
        '名家课堂'
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {}
}
</script>

<style scoped lang="less">
.video-desc {
  padding: 60px 276px;

  .video-list {
    display: flex;
  }
}
</style>
